<template>
	<!-- <statusBarVue title="地址管理" :isShowBar="true" :isShowLeft="true" /> -->
	<view class="mall-order-page">
		<view class="mall-order-page-group">
			<view class="tab-nav-group">
				<view class="tab-nav">
					<view :class="typeTabIndex === i ? 'active tab-nav-item' : 'tab-nav-item'" @click="typeTabIndex = i"
						v-for="(v,i) in typeList" :key="i">
						<uni-badge class="uni-badge-left-margin" :text="v.totelNum" absolute="rightTop" size="small">
							<view class="box"><text class="box-text">{{v.text}}</text></view>
						</uni-badge>
					</view>
				</view>
			</view>
			<view class="mall-order-list" :style="{ height: 'calc('+ pageHeighthaveBar +'px - 44px - 47px- 46px )' }"
				v-if="orderList.length">
				<view class="mall-order-list-item" v-for="(v, i) in orderList" :key="i">
					<view class="h">
						<text class="id">订单编号：{{v.id}}</text>
						<text class="status"
							:class=" (v.status === 0 || v.status === 4 || v.status === 5) ? 'isChange' : ''">{{statusList[v.status]}}</text>
					</view>
					<view class="b">
						<view class="goods">
							<!-- <image class="goods-img" :src="v.goodsImg" mode=""></image> -->
							<img class="goods-img"
								src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/5c09f5c9-6fa8-4b4c-a975-49f8019c0d7e.jpg"
								alt="" />
							<view class="goods-text">
								<view class="goods-name">
									{{v.goodsTit}}
								</view>
								<view class="nums">
									<view class="goods-nums">
										x{{v.nums}}
									</view>
									<view class="goods-nums">
										实付款 ￥{{v.price}}
									</view>
								</view>
							</view>
						</view>
						<view class="logistics" v-if="v.status === 5 || v.status === 3">
							<view class="text" v-if="v.status === 5">
								<view class="transit"></view> 运输中 <text class="details">当前物流已经到苏州中转站</text>
							</view>
							<view class="text" v-if="v.status === 3">
								<view class="sign"></view> 已签收 <text class="details">客户签收人：已签收，签收人菜鸟驿站</text>
							</view>
						</view>
					</view>
					<view class="f" :style="{marginTop:  (v.status !== 5 && v.status !== 3) ? '69rpx' : '0'}">
						<!-- 待支付  -->
						<view class="btns" v-if="v.status === 0">
							<button class="btn" @click="goToPage('/homePages/mall/orderDetail')">订单详情</button>
							<button class="btn isChange">立即支付</button>
						</view>
						<!-- 订单超时  -->
						<view class="btns" v-if="v.status === 1 || v.status === 2">
							<button class="btn">删除订单</button>
							<button class="btn">订单详情</button>
						</view>
						<!-- 待发货 -->
						<view class="btns" v-if="v.status === 4">
							<button class="btn">订单详情</button>
							<button class="btn">催发货</button>
						</view>
						<!-- 已发货 -->
						<view class="btns" v-if="v.status === 5">
							<button class="btn">订单详情</button>
							<button class="btn">查询物流</button>
							<button class="btn isChange">确认收货</button>
						</view>
						<!-- 交易完成 -->
						<view class="btns" v-if="v.status === 3">
							<button class="btn">删除订单</button>
							<button class="btn">查询物流</button>
							<button class="btn">订单详情</button>
						</view>
					</view>
				</view>
			</view>
			<view class="mall-order-none" v-else>
				<emptyVue />
			</view>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';
	import emptyVue from '@/components/empty.vue';

	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			statusBarVue,
			emptyVue
		},
		props: {
			pageHeighthaveBar: {
				type: Number
			}
		},
		data() {
			return {
				typeTabIndex: 0,
				typeList: [{
						text: '全部',
						value: 0,
						totelNum: 0,
					},
					{
						text: '待支付',
						value: 1,
						totelNum: 3,
					},
					{
						text: '待收货/使用',
						value: 2,
						totelNum: 10,
					},
					{
						text: '已完成',
						value: 3,
						totelNum: 0,
					},
					{
						text: '已取货',
						value: 4,
						totelNum: 0,
					}
				],
				statusList: {
					0: '待支付',
					1: '订单超时',
					2: '已取消',
					3: '交易完成',
					4: '待发货',
					5: '已发货',
				},
				orderList: [{
						id: '230948290384023984',
						status: 0, // 0 为 待支付 1为订单超时 2为已取消 3为交易完成 4为带发货 5为已发货
						goodsImg: '',
						goodsTit: '优渥PLC网关工业数据采集远程上下载程序边缘计算OPC组态DTU模块',
						nums: 1,
						price: 0.01
					},
					{
						id: '230948290384023984',
						status: 1, // 0 为 待支付 1为订单超时 2为已取消 3为交易完成 4为带发货 5为已发货
						goodsImg: '',
						goodsTit: '优渥PLC网关工业数据采集远程上下载程序边缘计算OPC组态DTU模块',
						nums: 1,
						price: 0.01
					},
					{
						id: '230948290384023984',
						status: 2, // 0 为 待支付 1为订单超时 2为已取消 3为交易完成 4为带发货 5为已发货
						goodsImg: '',
						goodsTit: '优渥PLC网关工业数据采集远程上下载程序边缘计算OPC组态DTU模块',
						nums: 1,
						price: 0.01
					},
					{
						id: '230948290384023984',
						status: 3, // 0 为 待支付 1为订单超时 2为已取消 3为交易完成 4为带发货 5为已发货
						goodsImg: '',
						goodsTit: '优渥PLC网关工业数据采集远程上下载程序边缘计算OPC组态DTU模块',
						nums: 1,
						price: 0.01
					},
					{
						id: '230948290384023984',
						status: 4, // 0 为 待支付 1为订单超时 2为已取消 3为交易完成 4为带发货 5为已发货
						goodsImg: '',
						goodsTit: '优渥PLC网关工业数据采集远程上下载程序边缘计算OPC组态DTU模块',
						nums: 1,
						price: 0.01
					},
					{
						id: '230948290384023984',
						status: 5, // 0 为 待支付 1为订单超时 2为已取消 3为交易完成 4为带发货 5为已发货
						goodsImg: '',
						goodsTit: '优渥PLC网关工业数据采集远程上下载程序边缘计算OPC组态DTU模块',
						nums: 1,
						price: 0.01
					},
				]

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.mall-order-page {
		position: relative;
		font-family: "Arial";

		&-group {
			width: 100%;
			margin: auto;

			.tab-nav-group {
				width: 100%;
				height: 47px;
				overflow: auto;

				.tab-nav {
					width: max-content;

					&-item {
						padding: 20rpx 33rpx;
						text-align: center;
						float: left;
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 30rpx;
						color: #565656;

						&.active {
							font-family: PingFangSC-Semibold;
							font-weight: 600;
							font-size: 34rpx;
							color: #000000;
						}

						.box {
							position: relative;

							&::after {
								display: inline-block;
								content: "";
								width: 100%;
								height: 8rpx;
								background-image: linear-gradient(91deg, #FF6101 0%, #FEB855 99%);
								position: absolute;
								bottom: 0;
								left: 0;
								right: 0;
								z-index: -1;
							}
						}
					}
				}
			}

			.mall-order-list,
			.mall-order-none {
				background-color: #F5F6FA;
				height: calc(100vh - 44px - 47px - 44px - 10px - 46px - env(safe-area-inset-bottom));
				overflow: auto;
				box-sizing: border-box;
				padding: 24rpx 26rpx;

				.mall-order-list-item {
					padding: 21rpx 24rpx;
					box-sizing: border-box;
					background-color: #fff;
					margin-bottom: 32rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.isChange {
						color: #FA6400 !important;
						border-color: #FA6400 !important;
					}

					.h {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 21rpx;
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 30rpx;
						color: #070707;
					}

					.b {
						.goods {
							display: flex;
							justify-content: space-between;

							.goods-img {
								width: 143rpx;
								height: 143rpx;
								border-radius: 8rpx;
								margin-right: 15rpx;
							}

							.goods-text {
								.goods-name {
									font-family: PingFangSC-Regular;
									font-weight: 400;
									font-size: 30rpx;
									color: #070707;
									margin-bottom: 14rpx;
								}

								.nums {
									font-family: PingFangSC-Semibold;
									font-weight: 600;
									font-size: 30rpx;
									color: #070707;
									display: flex;
									justify-content: space-between;
									align-items: center;
								}
							}
						}

						.logistics {
							width: 100%;
							height: 75rpx;
							line-height: 75rpx;
							background: #F8F8FA;
							border-radius: 8rpx;
							margin-top: 56rpx;
							margin-bottom: 25rpx;

							.text {
								font-family: PingFangSC-Semibold;
								font-weight: 600;
								font-size: 28rpx;
								color: #070707;
								display: flex;
								align-items: center;

								.details {
									font-family: PingFangSC-Regular;
									font-weight: 400;
									font-size: 26rpx;
									color: #6E6E70;
									margin-left: 10rpx;
								}

								.transit {
									width: 33.26rpx;
									height: 31.3rpx;
								}

								.sign {
									width: 28rpx;
									height: 35rpx;
								}

							}
						}
					}

					.f {
						margin-top: 69rpx;
						overflow: hidden;

						.btns {
							display: flex;
							justify-content: space-between;
							align-items: center;
							float: right;

							.btn {
								width: 168rpx;
								height: 68rpx;
								line-height: 68rpx;
								background: #FFFFFF;
								border: 1rpx solid #989898;
								border-radius: 36.5rpx;
								font-family: PingFangSC-Regular;
								font-weight: 400;
								font-size: 30rpx;
								color: #25232B;
								text-align: center;
								padding: 0;
								margin: 0 5rpx;

								&::after {
									border: none;
								}
							}
						}
					}
				}
			}

			.mall-address-none {
				text-align: center;

				.text {
					color: #999999;
					font-size: 44rpx;
					font-family: "PingFang SC Regular";
					line-height: 44rpx;
				}
			}
		}
	}
</style>